<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>props获取父组件的值</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="Application">
        <child :msgs="msg" :counts="count"></child>
    </div>
    <script>
        const App = Vue.createApp({
            setup() {
                const msg = Vue.ref("我将传给子组件");
                const count = Vue.ref(5);//初始值
                return {
                    msg,
                    count
                }
            },
        });

        //子组件
        const childBlock = {
            props: ["msgs", "counts"],
            setup(props) {
                //一个方法
                let childCount = Vue.ref(10)
                childCount.value = props.counts + childCount.value;
                //props是只读的，这里要转换下
                const onChange = () => {
                    childCount.value++
                    console.log("简单单击", props.counts)
                }
                return {
                    childCount,
                    onChange
                }

            },

            template: '<h1>{{msgs}}</h1> <button type="button" @click="onChange">单击{{childCount}}</button>'
        }
        App.component("child", childBlock);

        //挂载
        App.mount("#Application");
    </script>
</body>

</html>